<template>
  <div>
    {{ num }}----{{ doubleNum }}
    <button @click="handleAddNum">+1</button>

    <hr />
    <input type="text" v-model="iptValue" ref="iptRef" />
    <button @click="modifyMess(iptValue)">修改 v-model</button>
    <button @click="modifyMess(iptRef.value)">修改 ref</button>
    <h1>{{ data.mess }}</h1>
    <ul>
      <li v-for="(v, i) in data.list" :key="i">{{ v }}</li>
    </ul>
    {{ data.isShow ? '真' : '假' }}
    <ul>
      <li v-for="(v, i) in list1" :key="i">{{ v }}</li>
    </ul>


    <button @click="toDetail">点我去 详情</button>
  </div>
</template>

<!-- 推荐  Vue + volar + setup + vite -->
<script lang="ts" setup>
import { reactive, ref, computed, watch, onMounted, onUnmounted } from 'vue'

import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'


// 操作路由

// 类似  this.$router
const router = useRouter()
// 类似 this.$route
const route = useRoute()

const toDetail = () => {
  router.push('/detail')
  console.log(route);
}
// 定义响应式数据
const num = ref(1)
// 定义响应书数据
const data = reactive({
  iptValue: '',
  mess: 'hello Vue3 !!',
  list: [1, 2, 3, 4, 5],
  isShow: true
})
// 定义计算属性
const doubleNum = computed(() => {
  return num.value * 2
})
// 定义侦听器
watch(num, (newValue, oldValue) => {
  console.log('num 值发生改变了！！！！', newValue, oldValue);
})

// 获取节点
const iptRef = ref()
// 定义方法
const handleAddNum = () => {
  num.value++
}
const modifyMess = (value: string) => {
  data.mess = value
}


const list1 = ref<number[]>([])
// 声明周期函数
onMounted(() => {
  fetch('/api/list').then(resp => resp.json()).then(data => {
    console.log(data);
    list1.value = data.data
  })
})

onUnmounted(() => {
  list1.value = []
})




// 获取Vuex 数据
const store = useStore()

const user = computed(() => store.state.user)

console.log(user.value);

store.commit('login')

console.log(user.value);

// store.dispatch('123123123')

</script>